import styles from '@/pages/battle/index.less';
import { Flex, Tag, Dialog, Toast } from 'react-vant';
import { history } from 'umi';
import { SkillItem, sprite } from '@/utils/myinterface';
import * as _ from 'lodash';
import { connect } from 'dva';
import { useEffect } from 'react';
import { SkillItemClass } from '@/utils/skill';
export default connect(({ index }) => index)((props) => {
  const useSkillFn = (item: SkillItem) => {
    if (props.curRound !== 'user' || props.count == -1) return;
    Toast({ message: '你使用了' + item.name });
    //首先把威力的伤害打出来
    let skill = new SkillItemClass(props.curSprite, props.boss, item);
    skill.play();
    props.setBoss(skill.enemySprite);
    props.setCurSprite(skill.mySprite);
    if (skill.enemySprite.attr.currAttr.hp > 0) {
      props.changeCurRound('?');
    } else {
      props.changeCurRound('end');
      setTimeout(() => {
        Dialog.alert({
          message: '战斗胜利！',
        }).then(() => {
          history.push('/');
        });
      }, 0);
    }
  };
  return (
    <Flex gutter={2} justify="around" align="center" className={styles.flex}>
      {!!props.curSprite &&
        props.curSprite.skill &&
        props.curSprite.skill.map((item: SkillItem, index: number) => (
          <Flex.Item
            span={5.5}
            key={index}
            className={styles.skillItem}
            onClick={() => useSkillFn(item)}
            style={
              (props.curRound !== 'user' || props.count == -1) && {
                opacity: '0.3',
              }
            }
          >
            <div className={styles.itemHead}>
              <div>
                <span style={{ fontSize: '1.5em' }}>{item.name}</span>
              </div>
            </div>
            <Tag type={item.type == 'atk' ? 'danger' : 'primary'}>
              {item.type == 'atk' ? '普攻' : '属性'}
            </Tag>

            <div>
              次数：{item.count}/{item.size}
            </div>

            <div>威力：{item.power}</div>
          </Flex.Item>
        ))}
    </Flex>
  );
});
